<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.22.custom.css" type="text/css" media="all" />

<title>Insert title here</title>
</head>
<body>

	<style>
		.ui-autocomplete-loading { background: white url('css/ui-lightness/images/ui-icons_ffffff_256x240.png') right center no-repeat; }
	</style>
	
	<script>
	$(function() {
/*		
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}
		*/
		

		$( "input#birds" ).autocomplete({
			
			max : 10,
			delay : 100,
			minLength : 1,
			autoFocus : true,
			cacheLength : 1,
			scroll : true,
			highlight : false,
			
			//source: "TestBuscarServlet"
			//minLength: 2,
			
			select: function( event, ui ) {
				
				$("#idBirds").attr("value", ui.item.id);
				
				//alert("ddd");
				//log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value );
				//$( "#project" ).val( ui.item.label );
				
			},
			
			
			
			source: function(request, response) {
	            $.ajax({
	                url: "TestBuscarServlet",
	                dataType: "json",
	                data: request,
	                success: function( data, textStatus, jqXHR) {
	                	
	                    console.log( data);
	                    var items = data;
	                    response(items);
	                },
	                error: function(jqXHR, textStatus, errorThrown){
	                     console.log( textStatus);
	                }
	           });
		    }
		});
	});
	</script>



<div class="demo">

	<div class="ui-widget">
		<label for="birds">Birds: </label>
		ID: <input id="idBirds"/>
		Name: <input id="birds" />
	</div>
	
	<div class="ui-widget" style="margin-top:2em; font-family:Arial">
		Result:
		<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>

</div><!-- End demo -->



<div class="demo-description">
	<p>The Autocomplete widgets provides 991 814 144 suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
	<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
</div><!-- End demo-description -->


</body>
</html>